<template>
	<view>
		<view style="width: 90%; margin: 200rpx auto;">
			<view style=" margin-bottom: 70rpx; font-size: 60rpx; color: orange; text-align: center;">注 册</view>
			<uni-forms ref="form" :modelValue="form" :rules="rules">
				<uni-forms-item name="userName">
					<uni-easyinput v-model="form.userName" prefixIcon="person" placeholder="请输入用户名"></uni-easyinput>
				</uni-forms-item>

				<uni-forms-item name="email">
					<uni-easyinput v-model="form.email" @blur="getEmail" prefixIcon="email" placeholder="请输入邮箱">
					</uni-easyinput>
				</uni-forms-item>

				<uni-forms-item name="userPhone">
					<uni-easyinput v-model="form.userPhone" @blur="getPhone" prefixIcon="phone" placeholder="请输入手机号码">
					</uni-easyinput>
				</uni-forms-item>

				<uni-forms-item name="code">
					<uni-easyinput v-model="code" prefixIcon="chat" maxlength="6" placeholder="请输入验证码">
					</uni-easyinput>
					<label class="regFrom_tom_yzlabel" :style="{ color : QzyzmStare?'#cccccc':'#2ebbfe'}"
						@click="Qzyzm">{{Qztime}}{{Qztext}}</label>
				</uni-forms-item>

				<uni-forms-item name="password">
					<uni-easyinput type="password" v-model="form.password" prefixIcon="locked" placeholder="请输入密码">
					</uni-easyinput>
				</uni-forms-item>

				<uni-forms-item name="confirm">
					<uni-easyinput type="password" v-model="form.confirm" prefixIcon="locked" placeholder="请确认密码">
					</uni-easyinput>
				</uni-forms-item>

				<uni-forms-item name="sex" label="性别">
					<uni-data-checkbox v-model="form.sex" :localdata="sexs" />
				</uni-forms-item>
			</uni-forms>

			<view>
				<button type="default" @click="register">注 册</button>
			</view>

			<view class="logo_xieyi">
				<label @click="moutcl" :class="gouxSta?'cuIcon-squarecheckfill':'cuIcon-square'"></label>
				<view class="logo_text">请勾选并阅读<text>《注册协议》</text>及<text>《隐私协议》</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				URL: 'http://localhost:9000/', //主域名
				form: {
					userName: '',
					userPhone: '',
					email: '',
					password: '',
					sex: ''
				},
				code: '',
				sexs: [{
					text: '男',
					value: "男"
				}, {
					text: '女',
					value: "女"
				}],
				rules: {
					userName: {
						rules: [{
							required: true,
							errorMessage: '请输入用户名'
						}],
						validateTrigger: 'submit'
					},
					userPhone: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号'
						}],
						validateTrigger: 'submit'
					},
					code: {
						rules: [{
							required: true,
							errorMessage: '请输入验证码'
						}],
						validateTrigger: 'submit'
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入密码'
						}],
						validateTrigger: 'submit'
					},
					confirm: {
						rules: [{
							required: true,
							errorMessage: '请确认密码'
						}],
						validateTrigger: 'submit'
					},
					sex: {
						rules: [{
							required: true,
							errorMessage: '请选择性别'
						}],
						validateTrigger: 'submit'
					},
				},
				gouxSta: false,
				Qztime: '',
				QzyzmStare: false,
				Qztext: '获取验证码'
			}
		},
		methods: {

			//校验手机号
			getPhone() {
				let reg = /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/;
				if (!reg.test(this.form.userPhone)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的11位手机号'
					})
				}
			},

			//校验邮箱
			getEmail() {
				let email_reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;

				if (!email_reg.test(this.form.email)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的邮箱号'
					})
				}
			},



			//发送验证码判断有没有手机号
			Qzyzm() {
				if (this.form.userPhone == '') {
					uni.showToast({
						"title": "请输入手机号",
						"icon": 'none'
					})
				} else {
					uni.request({
						url: this.URL + 'user/user/user/send/' + this.form.userPhone,
						method: "GET",
						success: (res) => {
							console.log(res.data.data.code)
							
							if(res.data.code == 20001){
								uni.showToast({
									"title": "手机号已存在",
									"icon": 'none'
								})
							}else{
								var num = 60;
								if (this.QzyzmStare == false) {
									this.Qztime = '60';
									this.Qztext = 's后获取';
									this.QzyzmStare = true;
									var interval = setInterval(() => {
										--this.Qztime
									}, 1000)
									setTimeout(() => {
										clearInterval(interval)
										this.Qztext = '获取验证码'
										this.Qztime = ''
										this.QzyzmStare = false
									}, 60000)
								}
							}
						}
					})

				}

			},

			moutcl() {
				if (this.gouxSta == false) {
					this.gouxSta = true
				} else {
					this.gouxSta = false
				}
			},
			register() {
				if (this.gouxSta == false) {
					uni.showToast({
						"title": "请阅读并勾选用户协议",
						"icon": 'none'
					})
				} else {
					this.$refs.form.validate().then(res => {
						if (this.form.password !== this.form.confirm) {
							uni.showToast({
								icon: "none",
								title: '两次密码输入不一致'
							})
							return
						}
						uni.request({
							url: this.URL + 'user/user/user/getCode/' + this.form.userPhone,
							method: 'GET',
							success: (res) => {
								if (res.data.data.code !== this.code) {
									uni.showToast({
										icon: "none",
										title: '验证码错误'
									})
									return
								} else {
									uni.request({
										url: this.URL + 'user/user/user/regirect',
										method: 'POST',
										data: this.form,
										success: (res) => {
											console.log(res)
											if (res.data.code == 20000) {
												//注册成功提示信息
												uni.showToast({
													icon: "none",
													title: '注册成功',
												})
												//跳转页面
												uni.navigateTo({
													url: "login"
												})
											}
										}
									})
								}

							}
						})

					}).catch(err => {
						console.log('表单错误信息：', err);
					})
				}
			}
		}
	}
</script>

<style>
	page {
		background: #fff;
	}

	.login_img {
		width: 100%;
		height: auto;
		margin-top: 90upx;
	}

	.login_img image {
		width: 170upx;
		height: 170upx;
		display: block;
		margin: 0px auto;
		border-radius: 50%;
	}

	.login_from {
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 20upx 8%;
	}

	.login_from_input {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px #eee solid;
		padding: 40upx 0px;
		margin: 0px auto;
	}

	.login_from_name {
		width: 20%;
	}

	.login_from_fun {
		width: 80%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}

	.login_from_fun input {
		width: 100%;
		text-align: left;
		font-size: 14px;
	}


	.login_from_dl {
		width: 100%;
		height: 50px;
		line-height: 50px;
		margin-top: 150upx;
	}

	.login_from_dl button {
		width: 100%;
		height: 50px;
		line-height: 50px;
		background: #FF3B00;
		color: #fff;
		border-radius: 50px;
	}

	.logo_xieyi {
		width: 100%;
		height: 40px;
		line-height: 40px;
		display: flex;
		flex-direction: row;
		margin-top: 30upx;
		align-items: center;
		color: #444;
		font-size: 14px;
		justify-content: center;
	}

	.logo_xieyi label {
		font-size: 18px;
		margin-right: 1%;
		display: block;
		width: 15px;
		height: 15px;
	}

	.cuIcon-squarecheckfill {
		color: #FF3B00;
	}

	.logo_text text {
		color: #FF3B00;
	}

	.getyzm {
		width: 60%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		color: #FF3B00;
	}

	.cuicon {
		font-size: 18px;
	}

	.regFrom_tom_yzlabel {
		width: 60%;
		text-align: right;
	}

	.cuIcon-squarecheckfill {
		background: #FF3B00;
		position: relative;
		border: 2px #ccc solid;
		box-sizing: border-box;
		border-radius: 3px;
	}

	.cuIcon-square {
		background: #fff;
		border: 2px #ccc solid;
		box-sizing: border-box;
		border-radius: 3px;
	}
</style>
